tags: ItIron2021 Javascript

作者碎碎念

終於又等到今年的鐵人賽開賽了，去年寫的30天手把手的Vue.js教學即便只是個很基礎的教學筆記，卻仍收到一些很用心的回饋或是感謝，自己看了也相當高興! 今年的主題打算換個方向，希望能以不同的形式回饋整個社群! 相較完整的教學文章，今年的系列文會相對的簡短很多，大家就放鬆心情、每天花個幾分鐘看一下就行了!

這系列文章適合誰呢?

這個系列文其實啟發於我最近辦的javascript模擬面試活動，主要目的是協助像我一樣的轉職者在面對實際面試時不至於完全手足無措，四周的活動結束後獲得不錯的回響，因此打算將活動內容轉為一篇篇的文章紀錄，以下是我個人覺得適合的受眾，如果你目前處於以下的階段我認為(希望)這系列文章能對你有所幫助

• 正在準備jr等級職缺的面試且對javascript有基礎的理解
• 單純想確認自己javascript的基礎夠不夠紮實的小可愛

前言

今年的主題是希望透過探討我在面試過程中實際遇到的部分javascript題目，由於篇幅的關係，在這系列文章中不會探討較為進階的白板題，而是透過一些看似很簡單的題目讓閱讀者複習一些javascript這奇妙語言的一些核心概念，同時在文章中會說明一些我認為比較重要的面試技巧，讓像我一樣的轉職者即便沒有資訊背景也能很好的應付這類jr等級的題目。由於此系列重點放在確認一些你可能忽略的概念，因此在解題時很多觀念我並不打算用大量的篇幅說明，有些核心的概念不是短短幾句話就能帶過，我仍然會做基本的解釋讓你足夠理解每天的題目，但細部的原理需要麻煩你自行再去鑽研囉!
讓我們馬上開始今天的題目，要是你覺得中間的說明太過於冗長，也可以直接跳到最後的結論!

本日題目與解釋

請解釋var const & let的差別

這個題目可說是經典中的經典了，就連我為數不多的面試經驗中都被反覆問了至少三次以上，若你認為你已經非常了解這基本的問題，除了回答const & let是在ES6後出來的新玩意之外，試著回答以下的輸出結果吧!

情境一

var author = 'Danny'
var author = 'Wang'

console.log(author)

情境二

let author = 'Danny'
let author = 'Wang'

console.log(author)

情境三

const author = 'Danny'
const author = 'Wang'

console.log(author)

相信這問題應該難不倒多少人，最終的結果只有情境一會被順利的compile，其他情境你都會看到以下的錯誤訊息

Uncaught SyntaxError: Identifier 'author' has already been declared

這就是第一個重點

• 在同一個作用域中，var可以重複宣告相同變數，let & const則不能

而什麼是作用域(scope)呢? 最簡單的理解方式就是一個變數生存的範圍，超出該變數的作用範圍外就無法被使用，而當在目前的作用域中找不到指定的變數時便會不斷的往外層的環境去找(outer environment)，直到每個環境中都找不到指定的變數時才心不甘情不願的回傳not defined，而這同時也帶到我們的第二個重點。

• var宣告的變數為functional scoped，而let & const 宣告的變數為block scoped

光看理論有點困難對吧? 來看一下實際的範例

function demo() {
  for (var i = 1; i < 5; i++) {
    var host = 'Danny'
    let author = 'Wang'
  }
  console.log(host)
  console.log(author)
}

demo()

輸出結果為

Danny
Uncaught ReferenceError: author is not defined

由於host是用var宣告的，它的有效範圍就是整個demo function，與此相對的author變數因為是block scoped，它便僅存在於迴圈的block中，一旦離開迴圈外在的環境便沒有辦法使用它(所謂的block不用想得太複雜，在js中其實就是以{ }包起來的範圍都可以稱做一個block，像是常見的迴圈、條件式等)

除了以上兩點之外，最後一個比較細微的差別是在於重新賦值的限制，我們一樣看一個簡單的範例。

let name = 'Danny'
name = 'Wang'

const id = 32
id = 15

上方的例子中雖然name變數成功被重新賦值，但下方的const部分則會出現以下的錯誤訊息

Uncaught TypeError: Assignment to constant variable.

這是const關鍵字帶來的限制，也就是本題的重點三

• 利用const宣告的變數無法被重新賦值

這邊需要特別注意，無法被重新賦值與無法被改變是完全的兩回事，看個簡單的例子。

const arr = []
arr.push(1)
console.log(arr) // [1]

即便arr是用const宣告的變數，這個空陣列仍然被改變了，因為這並不是重新賦值的行為，所以不要傻傻地回答const宣告的變數就是個不可改變的常數!

本日核心觀念與總結

核心觀念

作用域scope、變數宣告與賦值

總結

1. var能重複宣告相同名稱的變數，const & let則不行
2. let & const & var有不同的作用域，前兩者為block scoped,後者為functional scoped.
3. const 宣告的變數永遠無法被重新賦值，但仍可以被改變(陣列、物件等的操作)

今天的練習就到此為止，很簡單對吧~!我們明天見啦!
小小提醒，當你在口試中遇到這類的問題時，若你知道面試官想考什麼概念，記得在回答時把關鍵字清楚的講出來，以今天的題目來說，面試官想聽到的很可能就是scope，這樣的回答會將你的逼格往上拉一些，也讓人了解你確實知道你在講什麼?